<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./9466云专题 iconfont/font/iconfont.css">
    <link rel="stylesheet" href="./download/font_3777154_1yd4ham5p4c/iconfont.css">
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        header {
            background-color: rgb(219, 209, 209);
            color: white;
            display: flex;
            justify-content: space-between;
            padding: 10px;
        }

        header div {
            width: 400px;
            height: 100%;
            display: flex;

        }

        header div span {
            display: block;
            margin: 10px;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background-color: red;
        }

        .container {
            display: flex;
        }

        .container ul {
            height: 800px;
            width: 200px;
            background-color: rgb(219, 209, 209);
            line-height: 40px;
            list-style: none;
            color: white;
        }

        .container ul li {
            width: 100%;
            text-align: center;
        }

        .container ul .active {
            background-color: rgb(174, 169, 169);
        }

        .container main {
            width: 1200px;
        }
        .container main .shang{
            width: 100%;
            height: 50px;
            background-color: aqua;
        }
        .container main .shang span {
            line-height: 50px;
            margin-left: 20px;
            font-size: 20px;
           display: inline;
          
        }
        .container main .shang input{
            margin-left: 20px;
            font-size: 20px;
        }
        .container main .xia {
            
            width: 100%;
            height: 100%;
        }
        .container main .xia h2{
           height: 50px;
            width: 300px;
            line-height: 50px;
        }
        .container main .xia p {
            margin-top: 50px;
            width: 500px;
            height: 500px;
            background-color: aqua;
            float: left;
            margin-left: 10px;
        }
        .container main .xia div {
            margin-top: 50px;
            width: 500px;
            height: 500px;
            background-color: aqua;
            float: left;
            margin-left: 10px;
        }
        .container main .xia div table{
            margin: 20px 0;
            width: 100%;
            line-height: 40px;
            text-align: center;
            border-collapse: collapse;
        }
        
    </style>
</head>

<body>
    <header>
        <div>
            <span></span>
            <span></span>
            <span></span>
        </div>
    </header>
    <section class="container">
        <ul>
            <li class="iconfont icon-home active"> Dashboard</li>
            <li class="iconfont icon-home "> Dashboard</li>
            <li class="iconfont icon-home "> Dashboard</li>
            <li class="iconfont icon-home "> Dashboard</li>
            <li class="iconfont icon-home "> Dashboard</li>
            <li class="iconfont icon-home "> Dashboard</li>
            <li class="iconfont icon-zhuantiguanli"> Dashboard</li>
            <li class="iconfont icon-zhuantiguanli"> Dashboard</li>
            <li class="iconfont icon-zhuantiguanli"> Dashboard</li>
            <li class="iconfont icon-zhuantiguanli"> Dashboard</li>
            <li class="iconfont icon-yonhu"> Dashboard</li>
            <li class="iconfont icon-shezhi
            "> Dashboard</li>
            <li class="iconfont icon-xitongrizhi
            "> Dashboard</li>
        </ul>
        <main>
            <div class="shang">
                <span>Home</span>
                <span>Contact</span>
                <input type="text" placeholder="Search">
            </div>
            <div class="xia">
                <h2>Dashboard v3</h2>
                <p class="quxiantu">
                  
                </p>
                <p class="zhuzhuangtu"></p>
                <div class="product">
                   <h3> Products</h3>
                   <table>
                    <thead>
                        <tr>
                            <th>Product</th>
                            <th>Price</th>
                            <th>sales</th>
                            <th>More</th>                                                 
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                           
                            
                           
                        </tr>
                    </tbody>
                   </table>

                </div>
                    
                <div class="Online Store Overview"></div>

            </div>

        </main>
    </section>
</body>

</html>

<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.0/echarts.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/Mock.js/1.0.0/mock.js"></script>
<script src="./Mock.js"></script>
<script>
    var con = document.querySelector('.quxiantu');
    var e = echarts.init(con);
    e.setOption({
        title: {
            text: 'Online Store Visitors                  View Report',
        },

        legend: {
            bottom: 10,
            right: 5

        },
        xAxis: { //x轴设置
            data: ['18th', '20th', '22th', '24th', '26th', '28th', '30th']
        },
        yAxis: { //y轴设置
            splitNumber: 10
        },
        series: [
            {
                name: 'This Week',
                type: 'line',
                data: [20, 80, 70, 200, 80, 85, 100,],
                symbolSize: 10, //圆点大小
                symbol: 'circle',//圆点形状
                smooth: true, //是否平滑曲线显示
                itemStyle: {
                    normal: {
                        color: 'blue', //折线颜色
                        borderWidth: 2, //圆点的边框宽度
                    }
                },
            },
            {
                name: 'Last Week',

                type: 'line',
                data: [100, 120, 160, 150, 180, 170, 150,],
                symbolSize: 10, //圆点大小
                symbol: 'circle',//圆点形状
                smooth: true, //是否平滑曲线显示
                itemStyle: {
                    normal: {
                        color: 'gray', //折线颜色
                        borderWidth: 2, //圆点的边框宽度

                    }

                }
            }

        ]
    });
    var son = document.querySelector('.zhuzhuangtu')
    var l = echarts.init(son);
    l.setOption({
        title: {
            text: 'Sales',

        },
        legend: {
            bottom: 10,
            right: 5

        },
        xAxis: { //x轴设置
            data: ['JUN', 'JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC']
        },
        yAxis: { //y轴设置
            min: 0,
            mix: 3,

            splitNumber: 4,
            axisLabel: {
                formatter: '${value}k',
            }

        },

        series: [
            {
                name: 'This year',

                barWidth: 15,
                backgroundStyle: {
                    color: 'blue',

                },
                type: 'bar',
                data: [1, 2, 3, 2.5, 2.8, 2.4, 3]

            },
            {
                name: 'Last year',
                type: 'bar',
                barWidth: 15,
                backgroundStyle: {
                    color: 'red',
                },
                data: [0.8, 1.5, 2.8, 2, 1.8, 1.5, 2],

            }
        ]
    });
    render(data.list)
function render(data){
    var str=data.map((item,index)=>{
        return`  <tr>
            <td><img src="./img/01.jpg" alt=""></td>
            <td>${item.name}</td>
            <td>$${item.phone} USD</td>
           <td>${item.isadmin==true?'<span class="iconfont icon-shangjiantou"></span>':'<span class="iconfont icon-xiajiantou"></span>'}</td>
          <td>${item.baifenbi}%</td>
          <td>${item.shuzi}sold</td>

          <td class="iconfont icon-tianjia"></td>
            </tr>`
    }).join('')
    document.querySelector('tbody').innerHTML=str
}
</script>